<template>
  <div>
    <V-CommonHeaderLeft>
      <div class="commodity-list">
        <navigation :msg="navMsg"></navigation>
        <NavSearch :searchData="searchData" ref="seach"></NavSearch>
        <el-table :height="tableHeight" :data="listData" class="table-class">
          <el-table-column type="selection" min-width="4%" style="display:none"></el-table-column>
          <el-table-column label="商品称号/商品编号" min-width="25%">
            <template slot-scope="scope">
              <div class="tab-content-td-two">
                <el-popover placement="right" trigger="hover" transition>
                  <img src="../../../static/images/200.jpg">
                  <img
                    slot="reference"
                    src="../../../static/images/100.jpg"
                    style="width:48px;height:48px;margin-right:20px;"
                  >
                </el-popover>
                <div class="td-content">
                  <div class="td-content-top">
                    <h4>{{scope.row.commNum.title}}</h4>
                    <p>{{scope.row.commNum.num}}</p>
                  </div>
                  <div class="td-content-down">
                    <el-popover placement="bottom-start" width="200" trigger="hover" transition>
                      <div class="choice">
                        <el-checkbox
                          v-for="(item,index) in ['新品','推荐','热销','特价','爆款']"
                          :key="index"
                          class="choice-check"
                        >{{item}}</el-checkbox>
                      </div>
                      <el-button slot="reference" class="td-content-down-span1">+标签</el-button>
                    </el-popover>
                    <span
                      v-for="(item,index) in ['爆款','特价','推荐']"
                      :key="index"
                      class="td-content-down-span2"
                    >{{item}}</span>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="classification" label="分类" min-width="8%"></el-table-column>
          <el-table-column prop="state" label="上/下架" min-width="8%"></el-table-column>
          <el-table-column prop="specifications" label="多规格" sortable min-width="8%"></el-table-column>
          <el-table-column prop="company" label="单位" min-width="10%"></el-table-column>
          <el-table-column prop="available" label="可用库存" sortable min-width="8%"></el-table-column>
          <el-table-column prop="system" label="系统库存" sortable min-width="8%"></el-table-column>
          <el-table-column prop="price" label="销售价" sortable min-width="12%"></el-table-column>
          <el-table-column prop="count" label="总销售" sortable min-width="8%"></el-table-column>
        </el-table>
        <Paging :msg="50" @pageNum="getPageNum" @pageId="getPageId"></Paging>
      </div>
    </V-CommonHeaderLeft>
  </div>
</template>

<script>
import VCommonHeaderLeft from '@/components/common/vCommonHeaderLeft/VCommonHeaderLeft'
import NavSearch from '@/components/common/navSearch/NavSearch'
import Paging from '@/components/common/paging/Paging'
import navigation from '@/components/common/navigation/Navigation'

// 搜索导航
export default {
  data () {
    return {
      navMsg: [
        {
          name: '商品',
          path: '/commodityList'
        }, {
          name: '商品列表',
          path: '/commodityList'
        }
      ],
      pageNum: 15, // 每页默认显示15条,
      pageId: 1, // 页面id,第几页
      parentMsg: [],
      listData: [
        {
          commNum: {
            src: '../../../static/images/100.jpg',
            title: '订做款女士睡衣长袖冰绸丝韩版翻领条纹春秋夏款家居服两件套装',
            num: 99032
          },
          classification: '饮料',
          state: '上架',
          specifications: '3种规格',
          company: '件',
          available: '',
          system: '',
          price: '$130.00起',
          count: '0.0'
        },
        {
          commNum: {
            src: '../../../static/images/100.jpg',
            title: '订做款女士睡衣长袖冰绸丝韩版翻领条纹春秋夏款家居服两件套装',
            num: 99032
          },
          classification: '饮料',
          state: '上架',
          specifications: '3种规格',
          company: '件',
          available: '',
          system: '',
          price: '$130.00起',
          count: '0.0'
        },
        {
          commNum: {
            src: '../../../static/images/100.jpg',
            title: '订做款女士睡衣长袖冰绸丝韩版翻领条纹春秋夏款家居服两件套装',
            num: 99032
          },
          classification: '饮料',
          state: '上架',
          specifications: '3种规格',
          company: '件',
          available: '',
          system: '',
          price: '$130.00起',
          count: '0.0'
        },
        {
          commNum: {
            src: '../../../static/images/100.jpg',
            title: '订做款女士睡衣长袖冰绸丝韩版翻领条纹春秋夏款家居服两件套装',
            num: 99032
          },
          classification: '饮料',
          state: '上架',
          specifications: '3种规格',
          company: '件',
          available: '',
          system: '',
          price: '$130.00起',
          count: '0.0'
        },
        {
          commNum: {
            src: '../../../static/images/100.jpg',
            title: '订做款女士睡衣长袖冰绸丝韩版翻领条纹春秋夏款家居服两件套装',
            num: 99032
          },
          classification: '饮料',
          state: '上架',
          specifications: '3种规格',
          company: '件',
          available: '',
          system: '',
          price: '$130.00起',
          count: '0.0'
        },
        {
          commNum: {
            src: '../../../static/images/100.jpg',
            title: '订做款女士睡衣长袖冰绸丝韩版翻领条纹春秋夏款家居服两件套装',
            num: 99032
          },
          classification: '饮料',
          state: '上架',
          specifications: '3种规格',
          company: '件',
          available: '',
          system: '',
          price: '$130.00起',
          count: '0.0'
        },
        {
          commNum: {
            src: '../../../static/images/100.jpg',
            title: '订做款女士睡衣长袖冰绸丝韩版翻领条纹春秋夏款家居服两件套装',
            num: 99032
          },
          classification: '饮料',
          state: '上架',
          specifications: '3种规格',
          company: '件',
          available: '',
          system: '',
          price: '$130.00起',
          count: '0.0'
        },
        {
          commNum: {
            src: '../../../static/images/100.jpg',
            title: '订做款女士睡衣长袖冰绸丝韩版翻领条纹春秋夏款家居服两件套装',
            num: 99032
          },
          classification: '饮料',
          state: '上架',
          specifications: '3种规格',
          company: '件',
          available: '',
          system: '',
          price: '$130.00起',
          count: '0.0'
        },
        {
          commNum: {
            src: '../../../static/images/100.jpg',
            title: '订做款女士睡衣长袖冰绸丝韩版翻领条纹春秋夏款家居服两件套装',
            num: 99032
          },
          classification: '饮料',
          state: '上架',
          specifications: '3种规格',
          company: '件',
          available: '',
          system: '',
          price: '$130.00起',
          count: '0.0'
        }
      ],
      searchData: [
        {
          numberingBox: true
        },
        [
          {
            placeholder: '请输入分类',
            classificationList: [
              {
                name: '饮料',
                children: [{
                  name: '毛衣',
                  children: [{
                    name: '衣服',
                    children: []
                  }]
                }]
              },
              {
                name: '卫衣',
                children: []
              },
              {
                name: '连衣裙',
                children: []
              },
              {
                name: '打底衫',
                children: []
              },
              {
                name: '短袖T恤',
                children: []
              },
              {
                name: '袜子',
                children: [{
                  name: '打底袜',
                  children: []
                },
                {
                  name: '隐形袜',
                  children: []
                },
                {
                  name: '运动袜',
                  children: []
                },
                {
                  name: '儿童袜',
                  children: []
                },
                {
                  name: '堆堆袜',
                  children: []
                },
                {
                  name: '商务袜',
                  children: []
                }]
              },
              {
                name: '下装',
                children: [
                  {
                    name: '短裤',
                    children: []
                  },
                  {
                    name: '铅笔裤',
                    children: []
                  },
                  {
                    name: '打底裤',
                    children: []
                  },
                  {
                    name: '牛仔裤',
                    children: []
                  },
                  {
                    name: '半身裙',
                    children: []
                  },
                  {
                    name: '短裙',
                    children: []
                  }]
              },
              {
                name: '上装',
                children: [
                  {
                    name: '针织衫',
                    children: []
                  },
                  {
                    name: '衬衫',
                    children: []
                  }
                ]
              },
              {
                name: '箱包',
                children: [
                  {
                    name: '鞋子',
                    children: [
                      {
                        name: '其他',
                        children: []
                      },
                      {
                        name: '凉鞋',
                        children: []
                      },
                      {
                        name: '粗跟',
                        children: []
                      },
                      {
                        name: '中跟',
                        children: []
                      },
                      {
                        name: '细跟',
                        children: []
                      },
                      {
                        name: '厚底松糕鞋',
                        children: []
                      }
                    ]
                  },
                  {
                    name: '双肩包',
                    children: []
                  },
                  {
                    name: '水桶包',
                    children: []
                  },
                  {
                    name: '手提包',
                    children: []
                  },
                  {
                    name: '拉杆箱',
                    children: []
                  },
                  {
                    name: '小方包',
                    children: []
                  }
                ]
              },
              {
                name: '未分类',
                children: []
              }
            ],
            labelList: []
          },
          {
            placeholder: '请输入商品标签',
            classificationList: [],
            labelList: ['新品', '推荐', '热销', '特价', '爆款']
          }
        ],
        {
          gaojiseach: true,
          daochu: true,
          daoru: true,
          add: true
        }
      ],
      data: [{
        id: 0

      }],
      lables: false,
      imgNum: false,
      rightNum: false,
      tableHeight: window.innerHeight - 223
    }
  },
  created () {
  },
  watch: {
    tableHeight (val) {
      if (!this.timer) {
        this.tableHeight = val
        this.timer = true
        let that = this
        setTimeout(function () {
          that.timer = false
        }, 400)
      }
    }
  },
  mounted () {
    const that = this
    window.onresize = () => {
      return (() => {
        window.tableHeight = window.innerHeight - 223
        that.tableHeight = window.tableHeight
      })()
    }
  },
  methods: {
    endseach () {
      this.$refs.seach.endseach()
    },
    sliceArray (array, size, id) {
      let result = []
      for (let x = 0; x < Math.ceil(array.length / size); x++) {
        let start = x * size
        let end = start + size
        result.push(array.slice(start, end))
      }
      return result[id]
    },
    getPageId (id = 1) {
      this.pageId = id
      // this.stock = this.sliceArray(this.parentMsg, this.pageNum, id - 1)
    },
    getPageNum (num) {
      // console.log(num)
      this.pageNum = num
      this.getPageId()
      // console.log(this.stock)
    },
    ejectLabel (index) {
      this.lables = index
    },
    leaveLable () {
      this.lables = false
    },
    imgShow (index) {
      this.imgNum = index
    },
    imgHide () {
      this.imgNum = false
    },
    rightList (index) {
      this.rightNum = index
    },
    leaveList () {
      this.rightNum = false
    }
  },
  components: {
    NavSearch,
    Paging,
    VCommonHeaderLeft,
    navigation
  }
}
</script>

<style lang="scss" scoped>
.commodity-list {
  width: 100%;
  background-color: #f2f5f7;
  padding: 0px 10px 0 0px;
  overflow: hidden;
}
/deep/ .table-class {
  font-size: 12px;
  thead {
    tr {
      th {
        background-color: #fcfcfc;
        font-weight: 400;
        border-top: 1px solid #ebeef5;
      }
    }
  }
  tr {
    td {
      padding: 10px 0;
    }
  }
}

.tab-content-td-two {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  .td-content {
    flex: 1;
    width: auto;
    .td-content-top {
      h4 {
        width: 85%;
        font-weight: 400;
        line-height: 14px;
      }
      p {
        margin: 3px 0;
        color: #999;
      }
    }
    .td-content-down {
      width: 100%;
      .td-content-down-span1 {
        display: inline-block;
        padding: 0 5px;
        border-radius: 5px;
        line-height: 20px;
        background-color: #e3e3e3;
      }
      .td-content-down-span2 {
        display: inline-block;
        padding: 0 5px;
        margin-left: 15px;
        border: 1px solid #ff9f13;
        border-radius: 5px;
        color: #ff9f13;
        line-height: 18px;
        background-color: #f7e8d2;
      }
      .choice {
        background-color: #fff;
        border: 1px #e9e9e9 solid;
        font-size: 14px;
        /deep/ .choice-check {
          margin: 0 35px 0 10px;
        }
      }
    }
  }
}
</style>
